<template>
    <div class="addFromProcess">
        <el-dialog :visible.sync="addFromProcessVisible" width="800px" @close='handleClose'>
            <span class="title" slot="title">添加工序</span>
            <div class="dialogBody">
                <el-input placeholder="可搜索工序名称" v-model="processListParams.name" size='mini' style="margin-bottom:10px">
                    <template slot="append">
                        <el-button type="primary" icon="el-icon-search" size="mini" plain @click="searchName">搜索
                        </el-button>
                    </template>
                </el-input>
                <el-table :data="procedureTable" border style="width: 100%;" max-height="500px"
                    :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
                    :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}"
                    @selection-change="handleSelectionChange" :row-key="getRowKeys" ref="procedureTable">
                    <el-table-column type="selection" width="55" :reserve-selection='true'>
                    </el-table-column>
                    <el-table-column prop="code" label="工序编号" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="name" label="工序名称">
                    </el-table-column>
                    <el-table-column prop="permissionsName" label="报工权限">
                    </el-table-column>
                    <el-table-column prop="rate" label="报工数配比">
                    </el-table-column>
                    <el-table-column prop="badProductName" label="不良品项列表">
                    </el-table-column>
                    <div slot="empty">
                        <el-empty :image-size="100"></el-empty>
                    </div>
                </el-table>
                <div class="pagination">
                    <span>已选{{multipleSelection.length}}项</span>
                    <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="[10,20,50,100]" :page-size="processListParams.limit" :current-page="currentPage"
                        layout="total,prev, pager, next,sizes" :total="total" background>
                    </el-pagination>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click='addFromProcessVisible = false'>取 消</el-button>
                <el-button type="primary" size="mini" @click="confirmAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        processList,
    } from '@/api/baseController'
    export default {
        data() {
            return {
                procedureTable: [],
                processListParams: {
                    name: '',
                    limit: 10,
                    page: 1
                },
                multipleSelection: [],
                total: 0,
                currentPage:1,
                addFromProcessVisible:false
            }
        },
        props:{
            planTime:{
                type:Array,
                default:()=>[]
            },
            planedNumber:[Number,Boolean]
        },
        methods: {
            //工序列表
            getProcessList(data) {
                processList(data).then(res => {
                    if (res.code == 200) {
                        this.procedureTable = res.data.records
                        this.total = res.data.total
                    }
                })
            },
            //工序名称搜索
            searchName() {
                this.processListParams.page = 1
                this.getProcessList(this.processListParams)
            },
            getRowKeys(row) {
                return row.id
            },
            add(payload) {
                this.getProcessList(this.processListParams)
                this.addFromProcessVisible = true
            },
            //全选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //确认
            confirmAdd(){
                if(!this.multipleSelection.length){
                    this.utils.showMsg('请先添加工序', 'error')
                    return
                }
                const {formatTime} = this.utils
                let data
                data = this.multipleSelection.map(i => {
                    return {
                        id: i.id,
                        processName: i.name,
                        processCode: i.code,
                        permissionsName: i.permissionsName,
                        rate: i.rate,
                        planedNumber: this.planedNumber == undefined ? 0 : this.planedNumber * i.rate,
                        goodProductNumber: '-',
                        badProductNumber: '-',
                        badProductList: i.badProductName,
                        planedStartTime: formatTime(this.planTime[0],
                            'yyyy-MM-dd hh:mm'),
                        planedEndTime: formatTime(this.planTime[1],
                            'yyyy-MM-dd hh:mm'),
                        actualStartTime: '-',
                        actualEndTime: '-',
                        customFieldVos:i.customFieldVos || null
                    }
                })
                this.addFromProcessVisible = false
                this.$emit('emitAddProcess',data)
            },
            handleClose(){
                this.processListParams.page = 1
                this.currentPage = 1
                this.$refs.procedureTable.clearSelection()
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.processListParams.limit = val
                this.getProcessList(this.processListParams)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.processListParams.page = val
                this.currentPage = val
                this.getProcessList(this.processListParams)
            },
        }
    }
</script>

<style lang="less" scoped>
    .addFromProcess {
        .dialogBody {
            .pagination {
                span {
                    margin-top: 15px;
                    float: left;
                }
                border-top: 1px solid #EBEEF5;
            }
        }
        /deep/ .el-dialog__body{
            padding: 30px 20px 0 20px;
        }
        /deep/ .el-dialog__footer {
            text-align: center;

            .el-button {
                padding: 7px 35px;
            }
        }
    }
</style>